<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
::v-deep .sidebar-container {
  background-color: rgba(0, 128, 255)!important;
}
/* 自定义tooltip样式 */
::v-deep .custom-tooltip {
  background-image: url('~@/assets/images/hoverbg.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border: none !important;
  padding: 15px !important;
  color: white !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  /* 添加一些过渡效果 */
  transition: all 0.3s ease !important;
  background-color: transparent;
}

/* 如果需要自定义tooltip内的文字样式 */
::v-deep .custom-tooltip .chart-tooltip-content {
  font-size: 14px;
  line-height: 1.6;
}

::v-deep .custom-tooltip .tooltip-title {
  font-weight: bold;
  margin-bottom: 8px;
}

/* 自定义 ECharts tooltip 样式 */
::v-deep .custom-echarts-tooltip {
  display: none;
  background: rgba(27,185,255, 0.9) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 26px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(4px);
  color: #fff !important;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

::v-deep .custom-echarts-tooltip .tooltip-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

::v-deep .custom-echarts-tooltip .tooltip-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 14px;
}

::v-deep .custom-echarts-tooltip .tooltip-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
}

::v-deep .custom-echarts-tooltip .tooltip-total {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
}
::v-deep .custom-echarts-tooltip {
  animation: tooltipFadeIn 0.3s ease-out;
  transform-origin: center bottom;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
::v-deep .el-pagination .btn-prev{
  background-color: #568eff;
}
::v-deep .el-pagination .btn-next{
  background-color: #568eff;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #2196f3;
}
/*!*全局下拉*!
::v-deep .el-select-dropdown{
  border: solid 1px transparent!important;;
}
::v-deep.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color:red!important;
}
::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: red;
}
!*全局下拉*!
::v-deep .el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color:blue;
}


!* 修改下拉框的背景颜色 *!
::v-deep .el-select-dropdown__wrap {
  background-color: red; !* 自定义背景颜色 *!
}
.select{
  background: blue;
}*/

</style>
<style lang="scss">
.custom-select-dropdown {
  background-color: #0080FF !important;
  border: 1px solid #00CCFE !important;

  .el-select-dropdown__item {
    color: #fff !important;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }

  .el-select-dropdown__item.selected {
    background-color: rgba(64, 158, 255, 0.5) !important;
  }

  // 时间选择器
  .el-picker-panel__body{
    color: #Fff;
  }
  .el-picker-panel *[slot=sidebar], .el-picker-panel__sidebar{
    background-color: #0080FF !important;
    border-right: 1px solid #00CCFE !important;
    .el-picker-panel__shortcut{
      color: #fff!important;
    }
  }
  .el-date-range-picker__content.is-left{
    border-right: 1px solid #00CCFE !important;
    .el-date-range-picker__header [class*=arrow-left] {
      color: #fff!important;
    }
  }
  .el-picker-panel__icon-btn {
    color: #fff!important;
  }
  .el-date-table th{
    color: #fff!important;
  }

  .el-picker-panel{
    color: #FFFFFF!important;
  }
  .el-date-table td.disabled div {
    background-color: #2196F3;
  }
  .el-date-table td.in-range div:hover {
    background-color: #03A9F4;
    color: #fff;
  }
  .el-date-table td.in-range div{
    background: #006afd;
  }
  .el-date-table td.available:hover {
    color: #00ccfe;
  }
  .el-date-table td.today span {
    color: #05e3ff;
    font-weight: bold;
  }
  .el-date-picker__header-label{
    color: #FFFFFF!important;
  }
  .el-month-table td .cell{
    color: #FFFFFF!important;
  }
  .el-month-table td.disabled .cell {
    background-color: #2196F3;
    cursor: not-allowed;
    color: #C0C4CC !important;
  }
  .el-year-table td .cell{
    color: #e6e6e6;
  }
  .el-year-table td.disabled .cell {
    background-color: #2196F3;
    cursor: not-allowed;
    color: #C0C4CC;
  }
}

.custom-confirm {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #e6f0ff, #bad2ff);
  border: none;
  width: 450px;

}

/* 使用深度选择器覆盖内部元素样式 */
.custom-confirm  .el-message-box__header {
  background: linear-gradient(90deg, #8caefb, #0160FA);
  /*padding: 20px;*/
  margin: 0;
  border-bottom:none;
  /*padding: 15px 20px;*/

}
.custom-confirm .el-message-box{

}
.custom-confirm  .el-message-box__title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;

}
.custom-confirm  .el-message-box__content {
  padding: 30px 20px;
  /*background: #f9fbfd;*/
}


.custom-confirm  .el-button {
  border-radius: 8px;
  min-width: 80px; // 60
  transition: all 0.3s;
  border: none;
  background: linear-gradient(135deg, #2196f3, #80bcf9);
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;

}
.custom-confirm  .el-button--primary {

  background: linear-gradient(90deg, #4f85ff, #6a8cff);


}
.el-table::before, .el-table--group::after, .el-table--border::after{
  border-color: transparent!important;
}
.el-table::before, .el-table--group::after, .el-table--border::after{
  border-color: transparent!important;
}
.app-container{
  padding: 0!important;
}
</style>
